<template>
  <v-container class="grey lighten-5 pa-3">
    <h2>课程详情 : {{ episode.name }}</h2>
    <v-row>
      <v-col cols="8" sm="10" xs="12">
        <v-card class="pa-2" tile outlined>
          <video width="92%" :src="episode.file" controls></video>
        </v-card>
      </v-col>
      <v-col cols="4" sm="2" xs="12">
        <v-card class="pa-2" outlined>
          <v-select
            v-model="currentIndex"
            :items="course.episodes.map((v, i) => ({ text: v.name, value: i }))"
          ></v-select>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const { id } = params;
    const course = await $axios.$get(`courses/${id}`, {
      params: {
        query: {
          populate: "episodes"
        }
      }
    });
    return { course };
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  computed: {
    episode() {
      return this.course.episodes[this.currentIndex];
    }
  }
};
</script>
